﻿<input id="right-side-panel" type="checkbox" class="drawer-toggle" @bind=isShow>

<div class="drawer-side overflow-x-hidden">
    <label for="right-side-panel" class="drawer-overlay z-10"></label>

    <div class="overflow-y-auto w-1/2 bg-base-100 text-base-content z-20">

        @if (title != null)
        {
            <div class="p-4 bg-base-200 rounded-none shadow flex text-lg font-bold">
                @if(kind != null)
                {
                    <div class="flex-grow">
                        <div class="flex">
                            <div class="text-gray-400 mr-2">@kind</div>
                            <div>@title</div>
                        </div>
                    </div>
                }
                else
                {
                    <div class="flex-grow">@title</div>
                }
                <div class="flex-none cursor-pointer" @onclick="Close">
                    @*Close Icon *@
                    <svg class="h-6 w-6 text-white" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">  <path stroke="none" d="M0 0h24v24H0z" />  <line x1="18" y1="6" x2="6" y2="18" />  <line x1="6" y1="6" x2="18" y2="18" /></svg>
                </div>
            </div>
        }

        @if (parameters != null && parameters.Count != 0)
        {
            <div class="p-3">
                <table class="table w-full rounded shadow">
                    <thead>
                        <tr>
                            <th class="normal-case">Name</th>
                            <th class="normal-case text-gray-300 w-full">Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var (name, value) in parameters)
                        {
                            <tr>
                                <td class="py-1 border-b-[0px] break-words whitespace-pre-wrap">@name</td>
                                <td class="py-1 border-b-[0px] break-words whitespace-pre-wrap text-gray-300">@value</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        }

        @if (results != null && results.Count != 0)
        {
            @foreach (var (workloadId, result) in results)
            {
                @if (result != null)
                {
                    <div class="p-3">
                        <table class="table w-full rounded shadow">
                            <thead>
                                <tr>
                                    <th class="normal-case" colspan="2">
                                        <div class="flex">
                                            <div class="text-gray-400 mr-1">Workload</div>
                                            <div>@workloadId</div>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var (name, value) in result)
                                {
                                    <tr>
                                        <td class="py-1 border-b-[0px] break-words whitespace-pre-wrap">@name</td>
                                        <td class="py-1 border-b-[0px] break-words whitespace-pre-wrap text-gray-300">@value</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                }
            }
        }

        @if (errorMessage != null)
        {
            <div class="m-3 p-4 bg-base-200 rounded shadow">
                <div class="flex items-center">
                    <svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
                    <h3 class="text-lg">
                        Latest Error
                    </h3>
                </div>
                <div class="m-3 text-sm text-gray-300 break-all overflow-x-auto">
                    <pre class="py-3">
                        @errorMessage
                                </pre>
                </div>
            </div>
        }

        @if (logView != null)
        {
            <div class="m-3 p-4 bg-base-200 rounded shadow">
                <div class="m-3 text-sm text-gray-300 break-all">
                    @foreach (var (value, view) in logView)
                    {
                        @view

                        <br />
                    }
                </div>
            </div>
        }
    </div>
</div>